import { forwardRef, useCallback, useMemo, useState } from 'react';
import { getMessage } from '@inbiz/react';
import { toJS } from '@formily/reactive';
import EditableTable, { IColumns } from '@inbiz/basic/EditableTable';
import moment from 'moment';

const TableBox = forwardRef(({ value }: any, ref) => {
  const columns: IColumns = useMemo(() => {
    return [
      {
        dataIndex: 'time',
        title: getMessage('TimeLine.time'),
        isIdentical: true,
        width: 150,
        editData: {
          type: 'DatePicker',
          rules: [
            {
              required: true,
            },
          ],
        },
        render: (value) => {
          if (value) {
            return moment(value).format('YYYY-MM-DD');
          } else {
            return '';
          }
        },
      },
      {
        dataIndex: 'content',
        title: getMessage('TimeLine.nodeContent'),
        width: 150,
        editData: {
          type: 'MultilingualInput',
          rules: [
            {
              required: true,
            },
          ],
        },
      },
      {
        dataIndex: 'linkAddress',
        title: getMessage('TimeLine.linkUrl'),
        width: 300,
        editData: {
          type: 'Input',
        },
      },
    ];
  }, []);

  const [dataSource] = useState(toJS(value) || []);
  const handleAdd = useCallback(() => {
    return { id: Date.now() };
  }, []);

  return (
    //@ts-ignore
    <EditableTable
      rowKey={'id'}
      columns={columns}
      dataSource={dataSource}
      onAdd={handleAdd}
      scroll={{ y: 200 }}
      ref={ref}
    />
  );
});

export default TableBox;
